<script setup>
import { Head, useForm, router } from '@inertiajs/vue3'
import AdminLayout from '@/Layouts/AdminLayout.vue'
import { ref, computed, onMounted } from 'vue'
import { 
    ArrowLeftIcon,
    CheckCircleIcon,
    ExclamationCircleIcon,
    ArrowPathIcon,
    DocumentTextIcon,
    PlusIcon,
    TrashIcon
} from '@heroicons/vue/24/outline'
import { useToast } from '@/Composables/useToast'

const props = defineProps({
    page: {
        type: Object,
        required: true
    }
})

const toast = useToast()

const pageTypeMap = {
    'about': '关于页面',
    'privacy': '隐私政策',
    'terms': '服务条款',
    'faq': '常见问题'
}

// 添加一个计算属性判断是否是关于页面
const isAboutPage = computed(() => {
    return props.page.page_key === 'about'
})

// 默认内容结构
const defaultContent = {
    name: '',
    role: '',
    avatar: '',
    bio: '',
    social_links: [],
    skills: []
};

// 创建表单
const form = useForm({
    title: props.page.title || '',
    content: props.page.content || defaultContent,
    html_content: props.page.html_content || ''
});

// 处理社交链接
const addSocialLink = () => {
    if (!form.content.social_links) {
        form.content.social_links = [];
    }
    form.content.social_links.push({
        name: '',
        url: '',
        icon: 'GitHubIcon'
    });
};

const removeSocialLink = (index) => {
    form.content.social_links.splice(index, 1);
};

// 处理技能
const addSkill = () => {
    if (!form.content.skills) {
        form.content.skills = [];
    }
    form.content.skills.push({
        name: '',
        description: ''
    });
};

const removeSkill = (index) => {
    form.content.skills.splice(index, 1);
};

// 初始化页面数据
onMounted(() => {
    // 确保关于页面有完整的结构
    if (isAboutPage.value) {
        if (!form.content.social_links) {
            form.content.social_links = [];
        }
        if (!form.content.skills) {
            form.content.skills = [];
        }
    }
});

// 提交表单
const submit = () => {
    form.put(route('admin.pages.update', props.page.id), {
        preserveScroll: true,
        onSuccess: () => {
            toast.success('页面内容更新成功！')
        },
        onError: (errors) => {
            console.error('表单错误：', errors)
            if (errors.error) {
                toast.error(errors.error)
            } else {
                toast.error('保存失败，请检查表单信息')
            }
        }
    })
}

// 返回列表
const goBack = () => {
    router.visit(route('admin.pages.index'))
}

// 是否有错误
const hasErrors = computed(() => {
    return Object.keys(form.errors).length > 0
})
</script>

<template>
    <AdminLayout>
        <Head :title="`编辑 ${pageTypeMap[page.page_key] || page.page_key} 页面`" />

        <div class="space-y-6">
            <!-- 页面头部 -->
            <div class="flex items-center justify-between">
                <div class="flex items-center gap-x-4">
                    <button
                        type="button"
                        @click="goBack"
                        class="inline-flex items-center rounded-md p-2 text-gray-400 hover:text-gray-500 hover:bg-gray-100 transition-colors"
                    >
                        <ArrowLeftIcon class="h-5 w-5" />
                        <span class="sr-only">返回</span>
                    </button>
                    <div>
                        <h1 class="text-3xl font-bold text-gray-900">
                            编辑 {{ pageTypeMap[page.page_key] || page.page_key }} 页面
                        </h1>
                        <p class="mt-2 text-sm text-gray-600">修改页面内容</p>
                    </div>
                </div>
                <button
                    type="button"
                    @click="submit"
                    :disabled="form.processing"
                    class="inline-flex items-center gap-x-2 rounded-md bg-orange-600 px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-orange-500 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
                >
                    <ArrowPathIcon
                        v-if="form.processing"
                        class="h-5 w-5 animate-spin"
                    />
                    <CheckCircleIcon
                        v-else
                        class="h-5 w-5"
                    />
                    {{ form.processing ? '保存中...' : '保存' }}
                </button>
            </div>

            <!-- 错误提示 -->
            <div
                v-if="hasErrors"
                class="rounded-md bg-red-50 border border-red-200 p-4"
            >
                <div class="flex">
                    <div class="flex-shrink-0">
                        <ExclamationCircleIcon class="h-5 w-5 text-red-400" />
                    </div>
                    <div class="ml-3">
                        <h3 class="text-sm font-medium text-red-800">表单验证失败</h3>
                        <div class="mt-2 text-sm text-red-700">
                            <ul class="list-disc list-inside space-y-1">
                                <li v-for="(error, field) in form.errors" :key="field">
                                    {{ error }}
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 表单内容 -->
            <form @submit.prevent="submit" class="space-y-8">
                <!-- 基本信息 -->
                <div class="bg-white rounded-lg border border-gray-200 shadow-sm">
                    <div class="px-6 py-4 border-b border-gray-200">
                        <div class="flex items-center gap-x-3">
                            <div class="h-10 w-10 rounded-lg bg-orange-100 flex items-center justify-center">
                                <DocumentTextIcon class="h-6 w-6 text-orange-600" />
                            </div>
                            <div>
                                <h2 class="text-lg font-semibold text-gray-900">基本信息</h2>
                                <p class="mt-1 text-sm text-gray-600">填写页面的基本信息</p>
                            </div>
                        </div>
                    </div>
                    <div class="p-6 space-y-6">
                        <!-- 页面标题 -->
                        <div>
                            <label for="title" class="block text-sm font-medium text-gray-900 mb-2">
                                页面标题 <span class="text-red-500">*</span>
                            </label>
                            <input
                                v-model="form.title"
                                type="text"
                                id="title"
                                class="block w-full rounded-md border border-gray-300 px-3 py-2 text-sm text-gray-900 placeholder:text-gray-400 focus:border-orange-500 focus:outline-none focus:ring-1 focus:ring-orange-500"
                                :class="{ 'border-red-300 focus:border-red-500 focus:ring-red-500': form.errors.title }"
                                placeholder="输入页面标题..."
                                required
                            >
                            <p v-if="form.errors.title" class="mt-2 text-sm text-red-600 flex items-center gap-x-1">
                                <ExclamationCircleIcon class="h-4 w-4" />
                                {{ form.errors.title }}
                            </p>
                        </div>
                    </div>
                </div>

                <!-- 关于页面特别内容 -->
                <div v-if="isAboutPage" class="bg-white rounded-lg border border-gray-200 shadow-sm">
                    <div class="px-6 py-4 border-b border-gray-200">
                        <h2 class="text-lg font-semibold text-gray-900">个人资料</h2>
                        <p class="mt-1 text-sm text-gray-600">填写关于页面的个人资料信息</p>
                    </div>
                    <div class="p-6 space-y-6">
                        <!-- 名称 -->
                        <div>
                            <label for="name" class="block text-sm font-medium text-gray-900 mb-2">
                                名称
                            </label>
                            <input
                                v-model="form.content.name"
                                type="text"
                                id="name"
                                class="block w-full rounded-md border border-gray-300 px-3 py-2 text-sm text-gray-900 placeholder:text-gray-400 focus:border-orange-500 focus:outline-none focus:ring-1 focus:ring-orange-500"
                                placeholder="输入名称..."
                            >
                        </div>
                        
                        <!-- 角色 -->
                        <div>
                            <label for="role" class="block text-sm font-medium text-gray-900 mb-2">
                                角色
                            </label>
                            <input
                                v-model="form.content.role"
                                type="text"
                                id="role"
                                class="block w-full rounded-md border border-gray-300 px-3 py-2 text-sm text-gray-900 placeholder:text-gray-400 focus:border-orange-500 focus:outline-none focus:ring-1 focus:ring-orange-500"
                                placeholder="输入角色..."
                            >
                        </div>
                        
                        <!-- 头像 -->
                        <div>
                            <label for="avatar" class="block text-sm font-medium text-gray-900 mb-2">
                                头像URL
                            </label>
                            <input
                                v-model="form.content.avatar"
                                type="text"
                                id="avatar"
                                class="block w-full rounded-md border border-gray-300 px-3 py-2 text-sm text-gray-900 placeholder:text-gray-400 focus:border-orange-500 focus:outline-none focus:ring-1 focus:ring-orange-500"
                                placeholder="输入头像URL..."
                            >
                            <p class="mt-1 text-xs text-gray-500">如不填写将使用默认头像</p>
                        </div>
                        
                        <!-- 简介 -->
                        <div>
                            <label for="bio" class="block text-sm font-medium text-gray-900 mb-2">
                                简介
                            </label>
                            <textarea
                                id="bio"
                                v-model="form.content.bio"
                                rows="4"
                                class="block w-full rounded-md border border-gray-300 px-3 py-2 text-sm text-gray-900 placeholder:text-gray-400 focus:border-orange-500 focus:outline-none focus:ring-1 focus:ring-orange-500"
                                placeholder="输入简介..."
                            />
                        </div>
                        
                        <!-- 社交链接 -->
                        <div>
                            <div class="flex justify-between items-center mb-4">
                                <label class="block text-sm font-medium text-gray-900">
                                    社交链接
                                </label>
                                <button
                                    type="button"
                                    @click="addSocialLink"
                                    class="inline-flex items-center gap-x-1.5 rounded-md bg-white px-3 py-1.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50"
                                >
                                    <PlusIcon class="h-4 w-4" />
                                    添加链接
                                </button>
                            </div>
                            
                            <div v-for="(link, index) in form.content.social_links" :key="index" class="flex gap-x-3 mb-3 items-end">
                                <div class="flex-1">
                                    <label :for="`link-name-${index}`" class="block text-xs font-medium text-gray-700 mb-1">
                                        名称
                                    </label>
                                    <input
                                        :id="`link-name-${index}`"
                                        v-model="link.name"
                                        type="text"
                                        class="block w-full rounded-md border border-gray-300 px-3 py-2 text-sm text-gray-900 placeholder:text-gray-400 focus:border-orange-500 focus:outline-none focus:ring-1 focus:ring-orange-500"
                                        placeholder="链接名称..."
                                    >
                                </div>
                                <div class="flex-1">
                                    <label :for="`link-url-${index}`" class="block text-xs font-medium text-gray-700 mb-1">
                                        URL
                                    </label>
                                    <input
                                        :id="`link-url-${index}`"
                                        v-model="link.url"
                                        type="text"
                                        class="block w-full rounded-md border border-gray-300 px-3 py-2 text-sm text-gray-900 placeholder:text-gray-400 focus:border-orange-500 focus:outline-none focus:ring-1 focus:ring-orange-500"
                                        placeholder="链接URL..."
                                    >
                                </div>
                                <div class="flex-1">
                                    <label :for="`link-icon-${index}`" class="block text-xs font-medium text-gray-700 mb-1">
                                        图标
                                    </label>
                                    <select
                                        :id="`link-icon-${index}`"
                                        v-model="link.icon"
                                        class="block w-full rounded-md border border-gray-300 px-3 py-2 text-sm text-gray-900 focus:border-orange-500 focus:outline-none focus:ring-1 focus:ring-orange-500"
                                    >
                                        <option value="GitHubIcon">GitHub</option>
                                        <option value="WeiboIcon">微博</option>
                                        <option value="ZhihuIcon">知乎</option>
                                        <option value="TwitterXIcon">Twitter/X</option>
                                        <option value="WechatIcon">微信</option>
                                        <option value="LinkedinIcon">LinkedIn</option>
                                    </select>
                                </div>
                                <button
                                    type="button"
                                    @click="removeSocialLink(index)"
                                    class="inline-flex items-center rounded-md p-2 text-red-600 hover:text-red-700 hover:bg-red-50 transition-colors"
                                >
                                    <TrashIcon class="h-5 w-5" />
                                    <span class="sr-only">删除</span>
                                </button>
                            </div>
                        </div>
                        
                        <!-- 技能专长 -->
                        <div>
                            <div class="flex justify-between items-center mb-4">
                                <label class="block text-sm font-medium text-gray-900">
                                    技能专长
                                </label>
                                <button
                                    type="button"
                                    @click="addSkill"
                                    class="inline-flex items-center gap-x-1.5 rounded-md bg-white px-3 py-1.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50"
                                >
                                    <PlusIcon class="h-4 w-4" />
                                    添加技能
                                </button>
                            </div>
                            
                            <div v-for="(skill, index) in form.content.skills" :key="index" class="flex gap-x-3 mb-3 items-end">
                                <div class="flex-1">
                                    <label :for="`skill-name-${index}`" class="block text-xs font-medium text-gray-700 mb-1">
                                        技能名称
                                    </label>
                                    <input
                                        :id="`skill-name-${index}`"
                                        v-model="skill.name"
                                        type="text"
                                        class="block w-full rounded-md border border-gray-300 px-3 py-2 text-sm text-gray-900 placeholder:text-gray-400 focus:border-orange-500 focus:outline-none focus:ring-1 focus:ring-orange-500"
                                        placeholder="技能名称..."
                                    >
                                </div>
                                <div class="flex-[2]">
                                    <label :for="`skill-desc-${index}`" class="block text-xs font-medium text-gray-700 mb-1">
                                        描述
                                    </label>
                                    <input
                                        :id="`skill-desc-${index}`"
                                        v-model="skill.description"
                                        type="text"
                                        class="block w-full rounded-md border border-gray-300 px-3 py-2 text-sm text-gray-900 placeholder:text-gray-400 focus:border-orange-500 focus:outline-none focus:ring-1 focus:ring-orange-500"
                                        placeholder="技能描述..."
                                    >
                                </div>
                                <button
                                    type="button"
                                    @click="removeSkill(index)"
                                    class="inline-flex items-center rounded-md p-2 text-red-600 hover:text-red-700 hover:bg-red-50 transition-colors"
                                >
                                    <TrashIcon class="h-5 w-5" />
                                    <span class="sr-only">删除</span>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 页面HTML内容 -->
                <div class="bg-white rounded-lg border border-gray-200 shadow-sm">
                    <div class="px-6 py-4 border-b border-gray-200">
                        <h2 class="text-lg font-semibold text-gray-900">页面内容</h2>
                        <p class="mt-1 text-sm text-gray-600">编辑页面的HTML内容</p>
                    </div>
                    <div class="p-6">
                        <div>
                            <label for="html_content" class="block text-sm font-medium text-gray-900 mb-2">
                                页面内容 (HTML)
                            </label>
                            <textarea
                                id="html_content"
                                v-model="form.html_content"
                                rows="12"
                                class="block w-full rounded-md border border-gray-300 px-3 py-2 text-sm text-gray-900 placeholder:text-gray-400 focus:border-orange-500 focus:outline-none focus:ring-1 focus:ring-orange-500 font-mono"
                                :class="{ 'border-red-300 focus:border-red-500 focus:ring-red-500': form.errors.html_content }"
                                placeholder="输入HTML内容..."
                            />
                            <p v-if="form.errors.html_content" class="mt-2 text-sm text-red-600 flex items-center gap-x-1">
                                <ExclamationCircleIcon class="h-4 w-4" />
                                {{ form.errors.html_content }}
                            </p>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </AdminLayout>
</template> 